<template>
    <div class="api-container">
        <ivu-header :option="headerOption"></ivu-header>
        <BackTop></BackTop>
        
        <div class="main">
            <ivu-sidemenu
                v-if="menuData.length"
                :menuData="menuData"
                @scrollPage="scrollPage"
                @selectApi="selectApi">
            </ivu-sidemenu>
            <div v-else>请先新增模块</div>

            <div :class="['api-content', isExpanding ? 'isExpanding' : '']">
                <Icon
                    class="btn-flex"
                    :type="isExpanding ? 'arrow-right-c' : 'arrow-left-c'"
                    size="20"
                    @click.native="flexContentArea">
                </Icon>

                <div id="apiContentInner" class="api-content-inner">
                    <div class="op-bar">
                        <Breadcrumb>
                            <BreadcrumbItem to="/">点餐研发上海</BreadcrumbItem>
                            <BreadcrumbItem :to="'/projectEdit?projId=' + projId">moma数据仪表盘</BreadcrumbItem>
                            <BreadcrumbItem>{{moduleName}}</BreadcrumbItem>
                        </Breadcrumb>

                        <Button @click="addNewApi" v-if="!isEditing">在当前模块下新增接口</Button>

                        <ButtonGroup v-if="!isEditing">
                            <Button @click="goEditing">编辑</Button>
                            <Button @click="mockApi">mock</Button>
                            <Button @click="testApi">测试</Button>
                            <Button>复制</Button>
                            <Button>移动</Button>
                            <Button>版本</Button>
                            <Button
                                v-if="!apiDetail.isDiscarded"
                                @click="discardApi">
                                废弃使用
                            </Button>
                            <Button @click="deleteApi">删除</Button>
                        </ButtonGroup>

                        <ButtonGroup v-else>
                            <Button @click="cancelEditing">取消</Button>
                            <Button @click="finishEditing">保存</Button>
                        </ButtonGroup>
                    </div>
                    <div class="api-info">
                        <ivu-apiinfoform
                            :apiDetail="apiDetail"
                            :isEditing="isEditing">
                        </ivu-apiinfoform>
                        
                        <table-all
                            :type="1"
                            :params="apiDetail.requestParams"
                            :isEditing="isEditing"
                            @addParam="addParam(1)">
                        </table-all>

                        <table-all
                            :type="2"
                            :params="apiDetail.responseParams"
                            :isEditing="isEditing"
                            @addParam="addParam(2)">
                        </table-all>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</template>

<script src="./apiList.js"></script>

<style lang="less" src="./apiList.less" scoped></style>